<template>
    <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="移动端扫码登录" name="ScanCode">
            <div class="QRcode">
              <!--扫码成功的样式-->
              <div class="QRcode_success" v-if="successShow">
                <img src="../../assets/img/login/success.png" alt="success">
                <p>扫码成功</p>
              </div>
              <!--二维码失效的样式-->
              <div class="QRcode_overtime" @click="AgainScanCode" v-if="overtimeShow">
                <p>二维码失效，点击重新获取</p>
                <img src="../../assets/img/login//reload.png" alt="reload.png">
              </div>
              <!--真正让用户扫的二维码-->
              <img class="QRcode_img" :src="QRcode">

            </div>
            <p class="tips">{{ tipsText }}</p>
          </el-tab-pane>
          <el-tab-pane label="移动端授权登录" name="WapEmpower">
            <div class="WapEmpower">
              <p>请点击【登录】按钮</p>
              <p>在移动端弹窗的页面中授权本次登录</p>
              <p class="tips" v-if="JSON.stringify(WapSuccess) != '{}'">{{WapSuccess.age}}</p>
              <el-button type="success" @click="RequestLogin"> 登 录 </el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
          socket: null,
          timerCheck: null,
          activeName: 'ScanCode'
        }
    },
    computed: {
      ...mapState(['WapSuccess', 'QRcode', 'ScanCodeShow', 'tipsText', 'overtimeShow', 'successShow'])
    },
    created() {
      this.getQRcode();
    },
    methods: {
       // 判断点击的是哪个tabs，默认激活调用 【移动端扫码登录】
      handleClick() {
        switch (this.activeName) {
          case "ScanCode":
            break;
          case "WapEmpower":
            break;
        }
      },
      // 请求移动端登录按钮被点击，检查用户是否已经扫码登录，有发送emit，没有提示
      RequestLogin() {
        localStorage.getItem("id") !== null
          ? this.socket.emit('WebRequestLogin', localStorage.getItem("id"))
          : this.$notify.error({ title: '提示', message: '请先扫码登录哦！' });
      },
      getQRcode() {
        this.$store.dispatch('getQRcode')
        // 获取二维码之后，每隔一秒向服务器询问，手机是否扫码成功
        this.timerCheck = setInterval(() => this.checkScanCode(), 300);
      },
      checkScanCode() {
        // 扫码成功
        if (this.$store.state.successShow || this.$store.state.overtimeShow) {
          clearInterval(this.timerCheck); // 扫码成功，清除定时器，不再询问服务器
        }
        this.$store.dispatch('checkScanCode', this.$store.state.uuid)
      },
      // 二维码失效后，用户点击二维码重新获取二维码的事件
      AgainScanCode() {
        this.$store.commit('AgainScanCode')
        this.getQRcode();
      }
    }
    
}
</script>

<style>
 * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }
    html,
    body,
    #app {
      width: 100%;
      height: 100%;
    }
    #app {
      margin: 0 auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .title {
      margin-top: 10px;
    }
    .QRcode {
      margin-top: 20px;
      width: 240px;
      height: 240px;
      position: relative;
    }
    .QRcode_overtime {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.68);
      color: #fff;
      text-align: center;
      z-index: 2;
      font-size: 18px;
      cursor: pointer;
    }
    .QRcode_overtime img {
      width: 40px;
      height: 40px;
      margin-top: 15px;
    }
    .QRcode_success {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.68);
      color: #fff;
      text-align: center;
      z-index: 3;
      font-size: 18px;
    }
    .QRcode_success img {
      width: 40px;
      height: 40px;
      margin-bottom: 15px;
    }
    .QRcode_img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
    }
    .info {
      color: #8d8d8d;
      margin-top: 10px;
    }
    .tips {
      margin-top: 10px;
      background: #8d8d8d;
      border-radius: 24px;
      padding: 4px 14px;
      font-size: 13px;
      color: #fff;
    }
    .WapEmpower button {
      margin-top: 20px;
    }
    .tips {
      margin-top: 20px;
    }
</style>